<template>
  <div class="warmUp_wrap">
    <div class="scroll_wrap" ref="scrollBox">
      <ul class="order_list" ref="scrollBoxInner">
        <div class="public_none_data" v-if="!list.length && isRequest">There is no relevant content</div>
        <li class="item_box" v-for="(item, index) in list" :key="index" v-else>
          <!-- Above information -->
          <div class="top_box">
            <!-- left -->
            <div class="left_wrap">
              <div class="img_wrap">
                <img :src="item.att_image" alt="">
              </div>
              <div class="txt_wrap">
                <p class="txt1">{{item.att_title}}</p>
                <p class="txt2">eachIDHome purchase restrictions<span class="limit_num">{{item.att_limit}}</span>Pieces</p>
                <p class="txt3">Receiving currencies:<span class="cion_type">{{item.att_currency}}</span></p>
              </div>
            </div>
            <!-- Right -->
            <div class="right_wrap">
              <span class="time">{{item.att_time}}</span>
            </div>
          </div>
          <!-- Underneath information -->
          <div class="bottom_box">
            <div class="b_left common_box">
              <p class="b_title">Public scale</p>
              <span class="_num">{{item.att_num}}</span>
            </div>
            <div class="b_center common_box">
              <p class="b_title">Price</p>
              <span class="_num">{{item.att_price}}</span>
            </div>
            <div class="b_right common_box">
              <span class="no_start">Not beginning</span>
            </div>
          </div>
          <!-- Progress bar -->
          <div class="speed_box">
            <!-- Progress bar -->
            <div class="line_box">
              <div class="inner_box">
                <div class="speed_inner">
                </div>
              </div>
              <span class="speed_num">0.00%</span>
            </div>
            <!-- Button -->
            <div class="btn">purchase</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'warmUp',
  data () {
    return {
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true, // Do you have more data?
      list: []
    };
  },
  methods: {
    // List interface
    getInfo () {
      this.canRequest = false;
      this.axios.post('index/crowdfunding/crow_list', {
        type: 1,
        page: this.page
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          let resObj;
          resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          this.list = this.list.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData) this.getInfo();
    };
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .warmUp_wrap{
    background: #f4f5f7;
    position: relative;
    height: 100%;
    padding-top: 180px;
    padding-bottom: 90px;
    .scroll_wrap {
      height: 100%;
      overflow-y: scroll;
      .order_list {
        .item_box {
          width: 90%;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 0 16px RGBA(36, 135, 255, .15);
          margin: 0 auto;
          margin-top: 36px;
          padding: 0 10px;
          overflow: hidden;
          // Above information
          .top_box {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1Px solid #e5e5e5;
            // left
            .left_wrap {
              width: 66%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .img_wrap {
                width: 180px;
                height: 108px;
                overflow: hidden;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .txt_wrap {
                height: 100%;
                .txt1 {
                  font-size: 28px;
                  color: #282828;
                }
                .txt2 {
                  font-size: 22px;
                  color: #666666;
                  // line-height: 60px;
                }
                .txt3 {
                  font-size: 26px;
                  color: #5c5c5c;
                  .cion_type {
                    color: #999999;
                  }
                }
              }
            }
            // Right
            .right_wrap {
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              .time {
                font-size: 22px;
                color: #5c5c5c;
                line-height: 100px;
              }
            }
          }
          // Underneath information
          .bottom_box {
            height: 114px;
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .common_box {
              width: 30%;
              height: 117px;
              &.b_center {
                text-align: center;
              }
              &.b_right {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                text-align: right;
                padding-bottom: 9px;
              }
              .b_title {
                line-height: 73px;
                font-size: 24px;
                color: #5c5c5c;
              }
              ._num {
                font-size: 26px;
                color: #999999;
              }
              .no_start {
                font-size: 26px;
                color: #fe6e3a;
                padding-right: 10px;
              }
            }
          }
          // Progress bar
          .speed_box {
            width: 100%;
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 32px;
            .line_box {
              width: 70%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .inner_box {
                width: 80%;
                height: 6px;
                background: #f5f5f5;
                border-radius: 8px;
              }
              .speed_num {
                font-size: 22px;
                color: #666666;
                padding-left: 20px;
              }
            }
            // Button
            .btn {
              width: 18%;
              height: 100%;
              background: #999;
              font-size: 26px;
              color: #ffffff;
              border-radius: 5px;
              text-align: center;
              line-height: 45px;
            }
          }
          &:last-child {
            margin-bottom: 36px;
          }
        }
        .public_none_data {
          padding-top: 40%;
        }
      }
    }
  }
</style>
